<template>
<!-- 测试导航栏 -->
<div class="header">
  <!-- 添加按钮 -->
  <van-icon :name="icon" style="position:fixed;top:28px;left:15px;"  @click="alertMenu"/>
  <!-- 弹出框 -->
  <van-action-sheet v-model="show" title="爱分享的人是厨房的天使" duration="0.2">
    <!-- 上传按钮 -->
    <div style="display:flex; margin-top:10%" class="publish">
      <div style="margin:0 25%">
        <router-link to="/uploader">
          <van-button round icon="photo-o" color="mediumturquoise" style="font-size:30px;width:60px;height:60px"></van-button>
        </router-link>
        <p>发作品</p>
      </div>
      <div >
        <van-button round icon="newspaper-o" color="coral" style="font-size:30px;width:60px;height:60px"></van-button>
        <p>传菜谱</p>
      </div>
    </div>
  </van-action-sheet>
  <!-- 搜索框 -->
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="搜索菜谱、食材"
      @search="onSearch"
    />
  </form>
  <!-- 顶部导航栏 -->
  <van-tabs v-model="active_tab"  class="index-tabs">
    <van-tab title="关注"></van-tab>
    <van-tab title="推荐"></van-tab>
    <van-tab title="分类"></van-tab>
  </van-tabs>
  <!-- 内容 -->
  <div style="overflow-y:scroll; position:fixed; top:108px; left:0px; right:0px; bottom:50px;">
    <!-- <p v-for="i in 50" :key="i" style="position">内容</p> -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
  </div>
  <!-- 底部导航 -->
  <van-tabbar v-model="active_bar">
    <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="collection" icon="star-o">收藏</van-tabbar-item>
    <van-tabbar-item name="me" icon="friends-o">我的</van-tabbar-item>
  </van-tabbar>
</div>
</template>
<script>
export default {
  data() {
    return {
      active_tab: 1,
      value:'',
      active_bar:'home',
      list: [],
      loading: false,
      finished: false,
      show:false,
      icon:"plus"
    };
  },
  methods: {
    //搜索框内容
    onSearch(val) {
      console.log(val)
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    alertMenu(){
      this.show=true;
    },
  },
  watch:{
    show(){
      if(this.show==true){
        this.icon="cross"
      }else{
        this.icon="plus"
      }
    }
  }
  // watch: {
  //   /** 监听顶部导航 */
  //   navactive(newval){
  //     // 滚动到顶部
  //     window.scrollTo(0,0);
  //     // newval 即是切换到的类别的类别id，可以作为cid发请求
  //     // console.log(newval);
  //     // 初始化页码
  //     this.page = 1;
  //     // 发请求 更新列表
  //     this.loadArticles(newval, 1, (list)=>{
  //       this.articles = list;
  //     });
  //   },
  // }
}
</script>

<style scoped>
/* 搜索框 */
.van-search__content {
  border-radius: 8px;
  margin:0 2%;
}
.van-search__action{
  padding-left: 0;
}
.van-search {
  width: 90%;
  margin-left: 5%;
}
.header{
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
}
.index-tabs {
  width: 70%;
  margin-left: 15%;
}
/* 关注，推荐，分类  字体颜色 */
.index-tabs>>>.van-tab{
  color: rgb(175, 173, 173);
}
.index-tabs>>> .van-tab--active{
  color: #000 ;
}
.index-tabs>>> .van-tabs__line{
  width: 20px;
}
/* 内容面板 */
.content {
  padding: 16px 16px 160px;
}
.van-action-sheet {
  height: 35%;
}

</style>
